<template>
  <div>
    <div class="person">
      <div class="card">
        <img class="head" src="../../assets/images/adver.jpg" />
        <div class="info">
          <div class="top">
            <span>麻小云</span>
            <img
              src="../../assets/images/mkf/icon_setting.png"
              @click="toSetting"
            />
          </div>
          <div class="bottom">个人ID:12345678 / 155****1234</div>
        </div>
      </div>
      <div class="vip" @click="toVip">
        <div class="left">
          <img class="crown" src="../../assets/images/mkf/crown.png" />
          <img class="isVip" src="../../assets/images/mkf/vip1.png" />
          <!-- <img class="isVip" src="../../assets/images/mkf/vip2.png" /> -->
        </div>
        <div class="right">
          <div class="btn">立即开通</div>
          <!-- <div class="time">有效期至：2020年6月1日</div> -->
        </div>
      </div>
    </div>
    <div class="user">
      <div class="wrapper">
        <div class="menu">
          <router-link :to="'/card'" class="item"
            ><img src="../../assets/images/mkf/mine1.png" alt="" />
            <p>名片管理</p>
          </router-link>
          <router-link :to="'/user/integral'" class="item"
            ><img src="../../assets/images/mkf/mine2.png" alt="" />
            <p>我的积分</p>
          </router-link>
          <router-link :to="'/user/invite'" class="item"
            ><img src="../../assets/images/mkf/mine3.png" alt="" />
            <p>邀请有礼</p>
          </router-link>
        </div>

        <div class="banner">
          <swiper :options="swiperOption">
            <swiper-slide>
              <router-link :to="''">
                <img class="adv" src="../../assets/images/adver.jpg" />
              </router-link>
            </swiper-slide>
          </swiper>
        </div>

        <div class="list">
          <router-link :to="'/user/origin'" class="item">
            <span>我的原创</span><span class="iconfont icon-jiantou"></span>
          </router-link>
          <router-link :to="'/user/transform'" class="item">
            <span>我转换的推文</span><span class="iconfont icon-jiantou"></span>
          </router-link>
          <router-link :to="'/user/collect'" class="item">
            <span>我的收藏</span><span class="iconfont icon-jiantou"></span>
          </router-link>
          <router-link :to="'/user/concern'" class="item">
            <span>我的关注</span><span class="iconfont icon-jiantou"></span>
          </router-link>
          <router-link :to="'/user/draft'" class="item">
            <span>草稿箱</span><span class="iconfont icon-jiantou"></span>
          </router-link>
        </div>
      </div>
    </div>
    <router-link class="writeBtn" :to="'/user/publish'">写文章</router-link>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "User",
  components: {
    swiper,
    swiperSlide
  },
  props: {},
  data: function() {
    return {
      swiperOption: {
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      }
    };
  },
  mounted: function() {},
  methods: {
    toSetting() {
      this.$router.push({
        path: "/user/setting"
      });
    },
    toVip() {
      this.$router.push({
        path: "/user/vip"
      });
    }
  }
};
</script>

<style scoped>
.person {
  width: 100%;
  height: 3.1rem;
  background: url(../../assets/images/mkf/myBg.png) bottom left no-repeat;
  background-size: 100% auto;
}

.person .card {
  padding: 0.4rem 0.2rem;
  height: 2rem;
  display: flex;
  align-items: center;
}

.person .card .head {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background-color: #a1a1a1;
  border: solid 1px rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  object-fit: cover;
}

.person .card .info {
  width: 5.9rem;
  padding-left: 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.person .card .info .top {
  height: 0.58rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.person .card .info .top span {
  display: block;
  font-size: 0.44rem;
  font-weight: bold;
  color: #fff;
}

.person .card .info .top img {
  display: block;
  width: 0.32rem;
  height: 0.32rem;
}

.person .card .info .bottom {
  font-size: 0.24rem;
  color: #999999;
  line-height: 0.4rem;
}

.person .vip {
  width: 100%;
  height: 1.1rem;
  background: url(../../assets/images/mkf/myBg2.png) bottom left no-repeat;
  background-size: 100% auto;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.person .vip .left {
  display: flex;
  align-items: center;
}

.person .vip .left .crown {
  display: block;
  width: 0.55rem;
  height: 0.45rem;
  margin-right: 0.14rem;
  position: relative;
  bottom: 3px;
}

.person .vip .left .isVip {
  display: block;
  height: 0.35rem;
  width: auto;
}

.person .vip .right .btn {
  width: 1.44rem;
  height: 0.5rem;
  background: url(../../assets/images/mkf/myBtn.png) top left no-repeat;
  line-height: 0.5rem;
  background-size: 100%;
  border-radius: 0.06rem;
  overflow: hidden;
  font-size: 0.28rem;
  font-weight: bold;
  color: #0e0e0e;
  text-align: center;
}

.person .vip .right .time {
  font-size: 0.24rem;
  font-weight: bold;
  color: #cebaad;
}

.user {
  background-color: #2a2631;
  border-radius: 0.2rem 0.2rem 0 0;
}

.user .wrapper {
  padding: 0;
}

.user .wrapper .menu {
  padding: 0.5rem 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.user .wrapper .menu .item img {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  margin: 0 auto;
}

.user .wrapper .menu .item p {
  margin-top: 0.09rem;
  font-size: 0.26rem;
  line-height: 0.46rem;
  text-align: center;
  color: #f9e7d8;
}

.user .wrapper .banner {
  border-radius: 0.1rem;
  overflow: hidden;
}

.user .wrapper .banner,
.user .wrapper .adv {
  display: block;
  width: 7.1rem;
  height: 1.4rem;
  margin: 0 auto;
}

.user .wrapper .list {
  padding: 1px 0.5rem 1.4rem;
}

.user .wrapper .list .item {
  display: block;
  height: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.28rem;
  color: #ffffff;
  line-height: 1rem;
}

.user .wrapper .list .item:last-child {
  border: none;
}

.user .wrapper .list .item .iconfont {
  font-size: 0.28rem;
  color: #666;
  float: right;
  position: relative;
  right: -2px;
}
</style>
